条件渲染和列表渲染

在 Vue.js 中，条件渲染和列表渲染是两个非常重要的概念。它们允许你根据条件动态地显示或隐藏元素，以及渲染动态数据列表。本教程将详细介绍这两个概念，并通过代码示例和实践练习帮助你掌握它们。

1. 条件渲染

条件渲染允许你根据某些条件来决定是否渲染某个元素或组件。Vue.js 提供了 v-if、v-else-if 和 v-else 指令来实现条件渲染。

1.1 v-if 指令

v-if 指令用于根据表达式的真假值来决定是否渲染元素。如果表达式的值为 true，则元素会被渲染；如果为 false，则元素不会被渲染。

<template>
  <div>
    <p v-if="isVisible">这个段落是可见的。</p>
    <p v-else>这个段落是不可见的。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

在这个例子中，如果 isVisible 为 true，则第一个段落会被渲染；如果为 false，则第二个段落会被渲染。

1.2 v-else-if 和 v-else 指令

v-else-if 和 v-else 指令用于在多个条件之间进行选择。v-else-if 可以有多个，而 v-else 只能有一个，并且必须跟在 v-if 或 v-else-if 之后。

<template>
  <div>
    <p v-if="type === 'A'">类型是 A</p>
    <p v-else-if="type === 'B'">类型是 B</p>
    <p v-else-if="type === 'C'">类型是 C</p>
    <p v-else>类型未知</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'B'
    };
  }
};
</script>

在这个例子中，根据 type 的值，会渲染相应的段落。

1.3 实践练习

练习： 创建一个简单的用户登录状态显示组件。如果用户已登录，显示“欢迎回来，用户名”；如果用户未登录，显示“请登录”。

<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来，{{ username }}</p>
    <p v-else>请登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: 'JohnDoe'
    };
  }
};
</script>

2. 列表渲染

列表渲染允许你根据数据动态地生成多个元素或组件。Vue.js 提供了 v-for 指令来实现列表渲染。

2.1 v-for 指令

v-for 指令用于遍历数组或对象，并生成相应的元素或组件。v-for 的基本语法是 v-for="item in items"，其中 items 是你要遍历的数组或对象，item 是当前遍历到的元素。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  }
};
</script>

在这个例子中，v-for 指令遍历 items 数组，并为每个元素生成一个 <li> 元素。:key 属性用于为每个生成的元素提供一个唯一的标识符，这在 Vue 的虚拟 DOM 更新中非常重要。

2.2 v-for 与对象

v-for 指令也可以用于遍历对象的属性。语法是 v-for="(value, key, index) in object"，其中 value 是属性值，key 是属性名，index 是索引。

<template>
  <ul>
    <li v-for="(value, key, index) in user" :key="key">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'JohnDoe',
        age: 30,
        email: '[email protected]'
      }
    };
  }
};
</script>

在这个例子中，v-for 指令遍历 user 对象的属性，并为每个属性生成一个 <li> 元素。

2.3 实践练习

练习： 创建一个简单的任务列表组件。用户可以添加任务，任务列表会动态更新。

<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="添加任务">
    <ul>
      <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    }
  }
};
</script>

在这个例子中，用户可以在输入框中输入任务，按下回车键后，任务会被添加到任务列表中，并动态更新。

3. 总结

通过本教程，你学习了 Vue.js 中的条件渲染和列表渲染。条件渲染允许你根据条件动态地显示或隐藏元素，而列表渲染允许你根据数据动态地生成多个元素或组件。这两个概念在实际开发中非常常用，掌握它们将大大提高你的开发效率。

希望你能通过实践练习巩固所学知识，并在实际项目中灵活运用这些技巧。继续加油！